<template>
  <div class="life-list-item-detail">
    <van-nav-bar title="商品详情"
                 left-text=""
                 left-arrow
                 @click-left="onClickReturn" />
    <el-image style="width: 100%; height: 100%"
              :src="getProductImg"
              fit="container" />
    <p>￥{{ getProductPrice }}</p>
    <div class="product-information">
      <span>{{ getProductName }}</span>
      <el-input-number v-model="num"
                       :min="0"
                       label="描述文字" />
    </div>
    <p class="product-sell">已卖出：{{ getProductSell }}</p>
    <div class="product-buy">
      <el-button-group>
        <el-button type="primary"
                   icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifeListItemDetail',
  methods: {
    onClickReturn () {
      this.$router.back()
    }
  },
  data () {
    return {
      num: 0
    }
  },
  computed: {
    getProductImg () {
      return this.$store.state.currentItem.image
    },
    getProductName () {
      return this.$store.state.currentItem.productName
    },
    getProductPrice () {
      return this.$store.state.currentItem.productPrice.toFixed(2)
    },
    getProductSell () {
      return this.$store.state.currentItem.productSell
    }
  }
}
</script>

<style scoped>
.life-list-item-detail img {
  width: 100%;
  height: 100%;
}
.life-list-item-detail p {
  padding: 0 0.4rem;
  margin: 0;
  color: #fe8008;
  font-size: 1.4rem;
}
.life-list-item-detail .product-information {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.life-list-item-detail .product-sell {
  color: #909399;
  font-size: 0.8rem;
}
.life-list-item-detail .product-buy {
  display: flex;
  justify-content: center;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
</style>
